<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本用法_复选框</title>
</head>
<body>

<div id="app">
    <!-- 在勾选时，数据checked的值变为了true，label中渲染的内容也会更新。 -->

    <input type="checkbox" v-model="checked" id="checked">
    <label for="checked">选择状态是：{{ checked }}</label>
</div>

<hr>


<div id="app1">
    <input type="checkbox" v-model="checked" value="html" id="html">
    <label for="html">HTML</label>
    <br>

    <input type="checkbox" v-model="checked" value="js" id="js">
    <label for="js">JS</label>
    <br>

    <input type="checkbox" v-model="checked" value="css" id="css">
    <label for="css">CSS</label>
    <br>

    <input type="checkbox" v-model="checked" value="python" id="python">
    <label for="python">Python</label>
    <br>
    <p>所选择的项是：{{ checked }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    //复选框
    /**
     * 复选框也分单独使用和组合使用，但是无论是单独使用和组合使用，都必须使用v-model指令用来绑定一个布尔值。
     * **/
    var app = new Vue({
        el: "#app",
        data: {
            checked: true
        }
    });

    /**
     * 复选框组合使用时，也是v-model和value一起，多个勾选框都绑定到同一个数据类型的数组，value的值在数组当中就会选中这一项。
     * 这一过程也是双向的，在勾选时value的值也会自动push到这个数组中。
     * **/

    var app1 = new Vue({
        el: "#app1",
        data: {
            checked: ['html', 'js', 'css']
        }
    })


</script>
</body>
</html>